<template>
  <view class="space-between">
    <view class="direction-start botPrice" v-if="type == 'team'">
      <view>本单享受</view>
      <view style="color: #3598e9; font-size: 30rpx">{{ TeamName }}</view>
      <view class="center">
        <image :src="image" class="team" v-if="image"></image>
        <text>车友团专享价</text>
      </view>
    </view>
    <view class="direction-start botPrice" v-if="type == 'shop'">
      <view>本单享受</view>
      <view style="color: #3598e9; font-size: 30rpx">{{ TeamName }}</view>
      <view class="center"><text>本站专营特惠价</text></view>
    </view>
    <view class="direction-start botPrice" v-if="type == 'KeyFill'">
      <view>本单享受</view>
      <view style="color: #3598e9; font-size: 30rpx">专营机</view>
      <view class="center"><text>专享价</text></view>
    </view>
    <view class="space-between botPrice" v-if="type == 'investors'" @click="navTo('team/nearbyTeam')">
      <view style="color: #3598e9; font-size: 30rpx; justify-content: space-around" class="direction-start">
        <text>加入车友团</text>
        <text style="margin-top: 20rpx">享受团惠价</text>
      </view>
      <view style="color:#468FF5;margin-right: 20rpx;">>></view>
    </view>
    <view class="space-between botPrice" v-if="type == 'fleet'">
      <view style="color: #3598e9; font-size: 30rpx;" class="direction-start">
        <text>本单享受</text>
        <text style="margin-top: 20rpx">车队特惠价</text>
      </view>
    </view>
    <view class="direction-start botPrice">
      <view>
        <text>价格区域</text>
        <text style="margin-left: 15rpx">{{ locationName }}</text>
      </view>
      <view class="center" :style="{color:PaymentMethod==='fenbo'?' #3598e9':'#333',marginTop:'15rpx',}"
        v-if="fenbo_price">
        <view class="pay">分拨资金支付</view>
        <view class="flex-start" style="margin-left: 20rpx">
          <text>{{ fenbo_price }}/公斤</text>
        </view>
      </view>
      <view class="center" :style="{color:PaymentMethod==='fleet'?' #3598e9':'#333',marginTop:'15rpx',}"
        v-if="fleet_price">
        <view class="pay">车队支付</view>
        <view class="flex-start" style="margin-left: 20rpx">
          <text>{{ fleet_price }}/公斤</text>
        </view>
      </view>
      <view class="center" :style="{color:PaymentMethod==='money'?' #3598e9':'#333'}">
        <view class="pay">钱包支付</view>
        <view class="flex-start" style="margin-left: 20rpx">
          <text>{{ vip_price }}/公斤</text>
        </view>
      </view>
      <view class="center" :style="{color:PaymentMethod==='wechat'?' #3598e9':'#333'}">
        <view class="pay">微信支付</view>
        <view style="margin-left: 20rpx">{{ fill_price }}/公斤</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { navTo } from '@/utils/navigator';
  /**
   * @component
   * @desc 单价区域位置展示
   * @property {String} image 团级别图片
   * @property {String} type 车友身份 team车友团  shop店铺机 investors散户 fleet车队大客户
   * @property {String} locationName 区域名
   * @property {String} TeamName 团名
   * @property {Number} fill_price 余额单价
   * @property {Number} vip_price 微信单价
   * @property {Number} unionId 是否存在联营商
   */
  defineProps({
    image: {
      type: String,
      default: '',
    },
    type: {
      type: String,
      default: '',
    },
    locationName: {
      type: String,
      default: '',
    },
    TeamName: {
      type: String,
      default: '',
    },
    fill_price: {
      type: Number,
      default: 0,
    },
    vip_price: {
      type: Number,
      default: 0,
    },
    fenbo_price: {
      type: Number,
    },
    fleet_price: {
      type: Number,
    },
    unionId: {
      type: Number,
      default: 0,
    },
    PaymentMethod: { type: String }
  });
</script>

<style lang="less">
  .team {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 5rpx;
  }

  .Icon {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    margin-left: 5rpx;
  }

  .botPrice {
    width: 48.5%;
    padding: 10rpx 15rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px 4px 4px 1px rgba(179, 179, 179, 0.25);
    border-radius: 5px;
    height: 182rpx;
    font-size: 24rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #333333;
    justify-content: space-around;
  }

  .pay {
    width: 150rpx;
    text-align: justify;
    text-align-last: justify;
  }
</style>